<template>
  <div class="selector-menu">
    <template v-if="searchData.length">
      <div
          class="selector-item"
          v-for="(item, index) in searchData"
          :key="index"
          @click="setItemValue(item)"
      >{{ item.text }}</div>
    </template>
    <NoDataTips v-else>

    </NoDataTips>
  </div>
</template>

<script>
import { ref, watch, onMounted } from "vue";
import NoDataTips from "./NoDataTips";

export default {
  name: "SelectorMenu",
  components: {NoDataTips},
  props: {
    searchValue: {
      type: String,
    },
    data: {
      type: Array,
      default() {
        return [
          {
            value: '1',
            text: '选项1',
          },
        ]
      }
    }
  },
  setup(props, ctx) {
    let searchData = ref([])

    onMounted(() => {
      //初始化searchData
      searchData.value = props.data
    })

    //侦听searchValue值，变化时执行searchData的过滤
    watch(() => {
      return props.searchValue
    }, (v) => {
      filterData(v)
    })

    //searchData过滤函数：过滤出具有searchValue的数据
    const filterData = (v) => {
      searchData.value = props.data.filter((item) => {
        return item.text.toLowerCase().includes(v.toLowerCase())
      })
    }

    //向外传递选项-
    const setItemValue = (item) => {
      console.log(6, item)
      ctx.emit('setItemValue', item)
    }
    return {
      setItemValue,
      searchData
    }
  }
}
</script>

<style scoped>
  .selector-menu {
    display: none;
    position: absolute;
    left: 65px;
    width: 170px;
    background-color: white;
    margin: auto;
    border-width: 0 0.5px 0.5px 0.5px;
    border-style: solid;
    border-color: #666666;
  }

  .selector-item {
    height: 18px;
    font-size: 14px;
    text-align: left;
    padding-left: 4px;
  }
  .selector-item:hover {
    background-color: #e9e9e9;
  }
</style>